<template>
  <view class="invoice">
    <navBar title="发票中心" :customBack="true" @back="handleBack"></navBar>
    <view :style="{
      marginTop: `${getSystemInfo.navBarHeight}px`,
      height: `calc(100vh - ${getSystemInfo.navBarHeight}px)`,
      display: 'flex',
      flexDirection: 'column'
    }">
	<u-alert type="warning" font-size="28rpx" description="发票可在订单完成后3个月内开具">
	</u-alert>
      <u-tabs
        :list="tabs"
        :current="tabIndex"
        :scrollable="false"
        :active-style="{ color: '#CF1A1B' }"
        line-color="#CF1A1B"
        line-width="60px"
        line-height="2px"
        @click="({index}) => tabIndex = index">
      </u-tabs>
      
      <!-- tabs 内容 -->
      <view class="invoice-body">
        <order-list v-show="tabIndex === 0" ref="orderList"></order-list>
        <record-list v-show="tabIndex === 1" ref="recordList"></record-list>
        <header-list v-show="tabIndex === 2" ref="headerList" is-component></header-list>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import navBar from '@/components/navBar.vue'
  import orderList from './components/orderList.vue'
  import recordList from './components/recordList.vue'
  import headerList from './components/headerList.vue'
  
  export default {
    components: {
      navBar,
      orderList,
      recordList,
      headerList
    },
    data() {
      return {
        tabs: [
          { name: '开发票' },
          { name: '申请记录' },
          { name: '发票抬头' },
        ],
        tabIndex: 0,
		isSuccess: false
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo'])
    },
    methods: {
      setTab(index) {
        this.tabIndex = index
      },
	  handleBack(){
		  if(this.isSuccess){
			 uni.switchTab({
			 	url: '/pages/mine/home'
			 }) 
		  }else{
			  uni.navigateBack()
		  }
	  }
    },
    onShow() {
      this.$refs.orderList.reset()
      this.$refs.recordList.reset()
      this.$refs.headerList.reset()
    },
    onLoad(option) {
	  if(option.success){
		  this.isSuccess = true
	  }
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.on('setInvoiceTab', this.setTab)
    }
  }
</script>

<style scoped lang="scss">
.invoice {
  overflow: hidden;
  
  /deep/ .u-tabs {
    background-color: #fff;
  }
  
  .invoice-body {
    flex: 1;
    margin-top: 20rpx;
  }
}
</style>
